<template>
  <div class="component ui-house-li" :class="{padding0: padding0}" @click.stop="$router.push({ path: detailPath ? detailPath : '/detail', query: {id: houseLi.id} })">
    <div class="house">
      <slot name="triangle"></slot>
      <router-link class="left__wrap" :to="{ path: detailPath ? detailPath : '/detail', query: {id: houseLi.id} }">
        <!-- <p class="mian-ya" v-if="houseLi.isFreeDeposit">免押</p> -->
        <p v-if="houseLi.isFreeDeposit || houseLi.isFreebet" class="mian-ya">免押</p>
        <p class="cover" :style="[{background: `url(${houseLi.coverImg})`}, bgImgStyle]"><img class="h-thumb" :src="houseLi.coverImg+'?imageView2/0/w/414/h/309'" /></p>
      </router-link>
      <div class="ui-house-info">
        <router-link :to="{ path: detailPath ? detailPath : '/detail', query: {id: houseLi.id} }">
          <h3 class="name" :class="{oneline: titleOneline}">{{houseLi.houseTitle}}</h3>
        </router-link>
        <div class="adress-price" :id="h3Class" :class="{valign: charLenth(houseLi.houseTitle)}">
          <router-link tag="div" class="vmid" :to="{ path: detailPath ? detailPath : '/detail', query: {id: houseLi.id} }">
          <!-- <div class="vmid"> -->
            <p class="address">{{houseLi.address}}</p>
            <div class="publish-time" v-if="showPublishTime">
              <span>发布时间：{{houseLi.createTime | formatDate}}</span>
            </div>
            <p class="price-time">
              <span class="price"><em>￥{{houseLi.rentalPrice}}</em>/月</span>
            </p>
          <!-- </div> -->
          </router-link>
        </div>
        <p class="label clearfix" :class="{'two-lable': twoLable}">
          <span v-for="i in span(houseLi.highlights)">{{ i }}</span>
        </p>
        <slot name="BTaction"></slot>
      </div>
      <!-- <div v-if="houseLi.isFreebet" class="mianya-logo">
        <img src="../images/brandTag.png" alt="">
      </div> -->
    </div>

    <!--<slot class="hr">-->
      <!--<hr class="ui-house-hr">-->
    <!--</slot>-->
  </div>
</template>
<script>
export default {
  name: 'houseList',
  props: ['houseInfo', 'detailPath', 'titleOneline', 'showPublishTime', 'twoLable', 'padding0'],
  data () {
    return {
      bgImgStyle: {
        display: 'block',
        'background-origin': 'border-box',
        'background-size': this.maxImg ? 'contain' : 'cover',
        'background-position': 'center',
        'background-repeat': 'no-repeat'
      },
      h3Class: 'vmid' + (Math.random() * 10000000).toFixed(0)
    }
  },
  computed: {
    houseLi () {
      return this.houseInfo ? this.houseInfo : {}
    }
  },
  mounted () {
  },
  created () {},
  methods: {
    span (span) {
      let sp = []
      if (span) sp = span.split(',')
      return sp
    },
    charLenth (txt) {
      if (!txt) return false
      let cl = txt.replace(/[\u2E80-\u9FFF]/g, 'aa').length
      // if (cl < 26) return true
      if (cl < 26) return false
      else return false
    }
  }
}
</script>
<style lang="less">
  .person__house__item {
        padding-left: 18px;
  }
  .h-thumb {
    width: 138px;
    height: 103px;
  }
  .my-house {
    .label {
      span:nth-child(3) {
        display: none;
      }
      @media screen and (max-width: 350px) {
        span:nth-child(2) {
          display: none;
        }
      }
    }
  }
  .house{
    position: relative;
    .mianya-logo{
      position: absolute;
      top:25px;
      left:0px;
      img{
        width:50%;
      }
    }
  }
  .left__wrap {
    position: relative;
  }
</style>
